<template>
  <div id="container" class="app-container">
    <div class="ui statistics">
      <div class="statistic">
        <div class="value">
          <i class="hourglass start icon" />
          {{ transporting }}
        </div>
        <div class="label">
          待处理
        </div>
      </div>
      <div class="statistic">
        <div class="value">
          {{ todo }}
        </div>
        <div class="label">
          运输中
        </div>
      </div>
      <div class="statistic">
        <div class="value">
          <i class="check icon" />
          {{ finished }}
        </div>
        <div class="label">
          已完成
        </div>
      </div>
<!--      <div class="statistic">-->
<!--        <div class="value">-->
<!--          {{ finished }}-->
<!--        </div>-->
<!--        <div class="label">-->
<!--          平均处理时间-->
<!--        </div>-->
<!--      </div>-->
    </div>
    <div class="box-container">
      <div id="graph1" class="box" style="margin-right: 100px;" />
      <div id="graph2" class="box" style="margin-left: 100px;" />
<!--      <div id="graph4" class="box" />-->
    </div>
  </div>
</template>

<script>
import { getCountByStatus } from '@/api/ticket'
import { getCountIn7day, getSumIn7day } from '@/api/graph'

export default {
  name: 'TicketData',
  data() {
    return {
      statusCount: {},
      todo: '',
      transporting: '',
      finished: '',
      countOptions: {
        title: {
          text: '近七日新增订单数'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['New']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] // 日期
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: 'New', // 新增
            type: 'line',
            stack: 'Total',
            data: []
          }
          // {
          //   name: 'Finish',
          //   type: 'line',
          //   stack: 'Total',
          //   data: []
          // }
        ]
      },
      sumOptions: {
        title: {
          text: '七日内产生的订单总金额'
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [],
            type: 'bar'
          }
        ]
      },
      statusOptions: {
        title: {
          text: '不同状态的订单数量',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
    }
  },
  mounted() {
    this.getCountByStatus()
    this.getCountIn7day()
    this.getSumIn7day()
  },
  methods: {
    getCountByStatus() {
      // const myChart3 = this.$echarts.init(document.getElementById('graph4'))
      getCountByStatus().then(response => {
        const { content } = response
        this.statusCount = content
        this.transporting = content[0]['count']
        this.todo = content[1]['count']
        this.finished = content[2]['count']
        const data = [
          { value: 335, name: 'Direct' },
          { value: 335, name: 'Direct' },
          { value: 335, name: 'Direct' }
        ]
        data[0]['value'] = this.todo
        data[0]['name'] = '待处理'
        console.log(this.todo)
        data[1]['value'] = this.transporting
        data[1]['name'] = '运输中'
        console.log(this.transporting)
        data[2]['value'] = this.finished
        data[2]['name'] = '已完成'
        if (this.finished === '') {
          this.finished = 0
        }
        this.statusOptions.series[0].data = data
        console.log(this.statusOptions.series[0].data)
        // myChart3.setOption(this.statusOptions)
      })
    },
    getCountIn7day() {
      const myChart1 = this.$echarts.init(document.getElementById('graph1'))
      getCountIn7day().then(response => {
        const { content } = response
        const value1 = content[0]
        // const value2 = content[1]
        const date = []
        for (let i = 0; i < value1.length; i++) {
          date.push(value1[i]['DATE'])
        }
        this.countOptions['xAxis']['data'] = date
        for (let i = 0; i < value1.length; i++) {
          if (typeof value1[i] !== undefined) {
            this.countOptions['series'][0]['data'].push(value1[i]['count'])
          } else {
            this.countOptions['series'][0]['data'].push(0)
          }
        }
        // for (let i = 0; i < value2.length; i++) {
        //   if (typeof value2[i] !== undefined) {
        //     this.countOptions['series'][1]['data'].push(value2[i]['count'])
        //   } else {
        //     this.countOptions['series'][1]['data'].push(0)
        //   }
        // }
        myChart1.setOption(this.countOptions)
      })
    },
    getSumIn7day() {
      const myChart2 = this.$echarts.init(document.getElementById('graph2'))
      getSumIn7day().then(response => {
        const { content } = response
        const date = []
        for (let i = 0; i < content.length; i++) {
          date.push(content[i]['DATE'])
        }
        this.sumOptions.xAxis.data = date
        for (let i = 0; i < content.length; i++) {
          this.sumOptions.series[0].data.push(content[i]['sum'])
        }
        myChart2.setOption(this.sumOptions)
      })
    }
  }
}
</script>
<style scoped>
@import '~@/styles/semantic.css';
#container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.box-container {
  display: flex;
  margin-top: 40px;
}
.box {
  width: 400px;
  height: 400px;
}
span {
  font-size: 30px;
  font-weight: bolder;
  margin-left: 10px;
  margin-right: 10px;
}
</style>

